Adding styling

Let's create some CSS styles for our app.

Create a file at src/static/css/base/pet-styles.css:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.breed-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.breed-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  padding: 15px;
}

.breed-card:hover {
  transform: translateY(-5px);
}

.breed-name {
  text-transform: capitalize;
  margin: 0 0 10px;
  color: #333;
}

.dog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.dog-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dog-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.dog-info {
  padding: 15px;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  background: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 10px;
}

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  text-decoration: none;
  color: #4CAF50;
}

Register this CSS file by creating or modifying client/styles.js:

import "@css/base/pet-styles.css";

Now update your Home component to use these classes:

import React from 'react';
import { useCurrentRouteData, Link } from '@tata1mg/router';

const Home = () => {
  const { data, error, isFetching } = useCurrentRouteData();
  
-  if (isFetching) return <div>Loading breeds...</div>;
-  if (error) return <div>Error loading breeds: {error.message}</div>;
+  if (isFetching) return <div className="container">Loading breeds...</div>;
+  if (error) return <div className="container">Error loading breeds: {error.message}</div>;
  
  const dogs = data?.message || [];
  const breeds = Object.keys(dogs);

  return (
-   <div>
+   <div className="container">
      <h1>Available Dog Breeds</h1>
-     <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+     <div className="breed-list">
        {breeds.slice(0, 12).map(breed => (
-         <div key={breed} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px', width: '250px' }}>
-           <h2 style={{ textTransform: 'capitalize' }}>{breed}</h2>
+         <div key={breed} className="breed-card">
+           <h2 className="breed-name">{breed}</h2>
            <p>Click to see available dogs</p>
-           <Link to={`/breed/${breed}`} style={{ 
-             display: 'inline-block', 
-             padding: '8px 16px', 
-             background: '#4CAF50', 
-             color: 'white', 
-             textDecoration: 'none',
-             borderRadius: '4px'
-           }}>
+           <Link to={`/breed/${breed}`} className="btn">
              View Dogs
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
};

// Fetchers remain the same
// ...

export default Home;

Also update the BreedDetails component:

import React from 'react';
import { useCurrentRouteData, useParams, Link } from '@tata1mg/router';

const BreedDetails = () => {
  const params = useParams();
  const { data, error, isFetching } = useCurrentRouteData();
  
-  if (isFetching) return <div>Loading breed details...</div>;
-  if (error) return <div>Error loading breed details: {error.message}</div>;
-  if (!data) return <div>No breed found</div>;
+  if (isFetching) return <div className="container">Loading breed details...</div>;
+  if (error) return <div className="container">Error loading breed details: {error.message}</div>;
+  if (!data) return <div className="container">No breed found</div>;
  
  const breedImages = data.message || [];
  const breedName = params?.breed

  return (
-   <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
-     <Link to="/" style={{ display: 'inline-block', marginBottom: '20px', textDecoration: 'none' }}>
+   <div className="container">
+     <Link to="/" className="back-link">
        &larr; Back to All Breeds
      </Link>
      <h1 style={{ textTransform: 'capitalize' }}>{breedName} Dogs Available for Adoption</h1>
-     <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+     <div className="dog-list">
        {breedImages.slice(0, 8).map((imageUrl, index) => (
-         <div key={index} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px' }}>
+         <div key={index} className="dog-card">
            <img 
              src={imageUrl} 
              alt={`${breedName} ${index+1}`} 
-             style={{ width: '250px', height: '250px', objectFit: 'cover' }} 
+             className="dog-image"
            />
-           <h2 style={{ textTransform: 'capitalize' }}>{breedName} #{index+1}</h2>
-           <p>Age: {Math.floor(Math.random() * 10) + 1} years</p>
+           <div className="dog-info">
+             <h2 style={{ textTransform: 'capitalize' }}>{breedName} #{index+1}</h2>
+             <p>Age: {Math.floor(Math.random() * 10) + 1} years</p>
+           </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// Fetchers remain the same
// ...

export default BreedDetails;

Refresh your browser to see the styled application.